<template>
  <div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd"
        >增加回访
        </el-button
        >
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="patientList" size="small">
      <el-table-column label="回访日期" align="center" prop="id"/>
      <el-table-column label="是否患有结肠癌" align="center" prop="phone"/>
      <el-table-column label="结肠癌确诊日期" align="center" prop="height"/>
      <el-table-column label="是否有其它癌症" align="center" prop="age"/>
      <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
              link
              type="primary"
              icon="Delete"
              @click="handleDelete(scope.row)"
          >删除
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <Pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

    <el-dialog :title="title" v-model="open" :close-on-click-modal="false">
      <el-form
          ref="patientRef"
          :model="form"
          label-width="auto"
          style="margin: 0 auto; width: 400px"
      >
        <el-form-item label="回访时间">
          <el-date-picker
              v-model="form.value1"
              type="date"
              placeholder="回访时间"
              :size="size"
              format="YYYY-MM-DD"
              style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="是否患结肠癌">
          <el-select
              v-model="queryParams.relation"
              placeholder="是否患结肠癌"
              clearable
          >
            <el-option
                v-for="dict in [
                { label: '是', value: '1' },
                { label: '否', value: '0' },
              ]"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="确诊时间">
          <el-date-picker
              v-model="form.value1"
              type="date"
              placeholder="确诊时间"
              :size="size"
              format="YYYY-MM-DD"
              style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="是否患有其它癌症">
          <el-select
              v-model="queryParams.relation"
              placeholder="是否患有其它癌症"
              clearable
          >
            <el-option
                v-for="dict in [
                { label: '是', value: '1' },
                { label: '否', value: '0' },
              ]"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="癌症名称">
          <el-input v-model="form.name" placeholder="癌症名称"/>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Patient">
import {delPatient, listPatient,} from "@/api/keyan/patient.js";
import {useRouter} from "vue-router";

const {proxy} = getCurrentInstance();
const {ky_yw, ky_jcjb, ky_hrjgl, ky_sf, ky_yjqk, ky_yyxjg, ky_xys, ky_jcjg} =
    proxy.useDict(
        "ky_yw",
        "ky_jcjb",
        "ky_hrjgl",
        "ky_sf",
        "ky_yjqk",
        "ky_yyxjg",
        "ky_xys",
        "ky_jcjg"
    );
const patientList = ref([]);
const doctorList = ref([]);
const open = ref(false);
const loading = ref(true);
const dialogDoctorListOpen = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("参与者回访");

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    phone: null,
    age: null,
    height: null,
    weight: null,
    jcjb: null,
    xys: null,
    yjqk: null,
    hrjgl: null,
    jzcaqsYw: null,
    cjjcSf: null,
    cjjcJg: null,
    s9: null,
    fitDna: null,
    cea: null,
    ca199: null,
    cj: null,
    wj1Jg: null,
    wj2Jg: null,
    wj3Jg: null,
  },
  rules: {},
});

const router = useRouter();
const {queryParams, form, rules} = toRefs(data);

/** 查询参与者基础信息列表 */
function getList() {
  loading.value = true;
  listPatient(queryParams.value).then((response) => {
    patientList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    patientName: null,
    phone: null,
    age: null,
    height: null,
    weight: null,
    jcjb: null,
    xys: null,
    yjqk: null,
    hrjgl: null,
    jzcaqsYw: null,
    jzcaqsGx: null,
    cjjcSf: null,
    cjjcSj: null,
    cjjcJg: null,
    s9: null,
    fitDna: null,
    cea: null,
    ceaJg: null,
    ca199: null,
    ca199Jg: null,
    cj: null,
    cjJg: null,
    qtzlbzw: null,
    tysId: null,
    wxysdj: null,
    wj1Fs: null,
    wj1Jg: [],
    wj2Fs: null,
    wj2Jg: [],
    wj3Fs: null,
    wj3Jg: [],
    deleted: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
  };
  proxy.resetForm("patientRef");
}

/** 新增按钮操作 */
function handleAdd() {
  open.value = true;
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["patientRef"].validate((valid) => {
    if (valid) {
      // form.value.wj1Jg = form.value.wj1Jg.join(",");
      // form.value.wj2Jg = form.value.wj2Jg.join(",");
      // form.value.wj3Jg = form.value.wj3Jg.join(",");
      // if (form.value.id != null) {
      //   updatePatient(form.value).then((response) => {
      //     proxy.$modal.msgSuccess("修改成功");
      //     open.value = false;
      //     getList();
      //   });
      // } else {
      //   addPatient(form.value).then((response) => {
      //     proxy.$modal.msgSuccess("新增成功");
      //     open.value = false;
      //     getList();
      //   });
      // }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  proxy.$modal
      .confirm('是否确认删除参与者基础信息编号为"' + _ids + '"的数据项？')
      .then(function () {
        return delPatient(_ids);
      })
      .then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
      })
      .catch(() => {
      });
}

getList();
</script>

<style scoped lang="scss">
.el-form-item {
  width: 380px;
}
</style>
